<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="<%=basePath%>"/>
    <title>茶叶进销存系统 - 编辑茶叶</title>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-regular);
        }
        .form-control {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
            background-color: #fff;
        }
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(139, 158, 107, 0.2);
        }
        .btn-group {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 30px;
        }
        .readonly-field {
            background-color: #f9faf7;
            cursor: not-allowed;
        }
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        .alert {
            padding: 10px 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            background-color: #fef0f0;
            color: var(--danger-color);
            border: 1px solid #fde2e2;
        }
        .tea-icon {
            color: var(--primary-color);
            margin-right: 5px;
        }
        .form-header {
            font-size: 18px;
            color: var(--text-regular);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        .form-row {
            display: flex;
            gap: 20px;
        }
        .form-col {
            flex: 1;
        }
        .image-preview {
            width: 150px;
            height: 150px;
            border: 1px dashed var(--border-color);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-top: 10px;
        }
        .image-preview img {
            max-width: 100%;
            max-height: 100%;
        }
        .file-input {
            display: none;
        }
        .file-label {
            display: inline-block;
            padding: 8px 15px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .file-label:hover {
            background-color: #7A8D5D;
        }
    </style>
</head>
<body>
<div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-logo" onclick="toggleSidebar()">
            <span><i class="fas fa-leaf tea-icon"></i> 茶叶进销存系统</span>
        </div>

        <div class="sidebar-menu">
            <div
                    class="menu-item "
                    onclick="location.href='views/home.jsp'"
            >
                <i class="fas fa-home"></i>
                <span>系统首页</span>
            </div>
            <div class="menu-item active" onclick="location.href='TeaServlet'">
                <i class="fas fa-coffee"></i>
                <span>茶叶管理</span>
            </div>
            <div class="menu-item" onclick="location.href='CategoryServlet'">
                <i class="fas fa-tags"></i>
                <span>分类管理</span>
            </div>
            <div class="menu-item" onclick="location.href='WarehouseServlet'">
                <i class="fas fa-boxes"></i>
                <span>仓库管理</span>
            </div>
            <div class="menu-item" onclick="location.href='OrderServlet'">
                <i class="fas fa-receipt"></i>
                <span>订单管理</span>
            </div>
            <div class="menu-item" onclick="location.href='LogisticsServlet'">
                <i class="fas fa-shipping-fast"></i>
                <span>物流管理</span>
            </div>
            <div class="menu-item" onclick="location.href='SupplierServlet'">
                <i class="fas fa-truck"></i>
                <span>供应商管理</span>
            </div>
            <div class="menu-item" onclick="location.href='<%=basePath%>purchase/list'">
                <i class="fas fa-truck"></i>
                <span>采购管理</span>
            </div>
            <div class="menu-item" onclick="location.href='CustomerServlet'">
                <i class="fas fa-users"></i>
                <span>客户管理</span>
            </div>
            <div class="menu-item" onclick="location.href='AddressServlet'">
                <i class="fas fa-map-marker-alt"></i>
                <span>地址管理</span>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <div class="navbar-left">
                <h3><i class="fas fa-edit tea-icon"></i> 编辑茶叶信息</h3>
            </div>
            <div class="navbar-right">
                <span><i class="fas fa-user tea-icon"></i> 欢迎，${ username}管理员</span>
                <a href="logout" class="el-link el-link--danger ml-10"><i class="fas fa-sign-out-alt"></i> 退出</a>
            </div>
        </div>

        <!-- 内容卡片 -->
        <div class="el-card">
            <div class="el-card__header">
                <span><i class="fas fa-info-circle tea-icon"></i> 茶叶详细信息</span>
            </div>
            <div class="el-card__body">
                <form action="TeaServlet?action=update" method="post" class="form-container" enctype="multipart/form-data">
                    <!-- 错误信息显示 -->
                    <c:if test="${not empty errorMessage}">
                        <div class="alert"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</div>
                    </c:if>

                    <div class="form-header">
                        <i class="fas fa-coffee tea-icon"></i> 基本信息
                    </div>

                    <div class="form-group">
                        <label for="tea_id"><i class="fas fa-barcode tea-icon"></i> 茶叶编号</label>
                        <input type="text" id="tea_id" name="tea_id" class="form-control readonly-field"
                               value="${tea.tea_id}" readonly>
                    </div>

                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="tea_name"><i class="fas fa-wine-bottle tea-icon"></i> 茶叶名称</label>
                                <input type="text" id="tea_name" name="tea_name" class="form-control"
                                       value="${tea.tea_name}" required>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="tea_category_id"><i class="fas fa-tags tea-icon"></i> 茶叶分类</label>
                                <select id="tea_category_id" name="tea_category_id" class="form-control" required>
                                    <c:forEach items="${categoryList}" var="category">
                                        <option value="${category.category_id}"
                                                <c:if test="${tea.tea_category_id == category.category_id}">selected</c:if>>
                                                ${category.category_name}
                                        </option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-col">
                            <div class="form-group">
                                <label for="price"><i class="fas fa-tag tea-icon"></i> 单价(元)</label>
                                <input type="number" id="price" name="price" class="form-control"
                                       value="${tea.price}" step="0.01" min="0" required>
                            </div>
                        </div>
                        <div class="form-col">
                            <div class="form-group">
                                <label for="unit"><i class="fas fa-weight tea-icon"></i> 单位(克)</label>
                                <input type="text" id="unit" name="unit" class="form-control"
                                       value="${tea.unit}" min="1" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="description"><i class="fas fa-comment-dots tea-icon"></i> 茶叶介绍</label>
                        <textarea id="description" name="description" class="form-control"
                                  required>${tea.description}</textarea>
                    </div>

                    <div class="form-header">
                        <i class="fas fa-image tea-icon"></i> 茶叶图片
                    </div>

                    <div class="form-group">
                        <label for="image"><i class="fas fa-camera tea-icon"></i> 上传新图片</label>
                        <input type="file" id="image" name="image" class="file-input" accept="image/*" onchange="previewImage(this)">
                        <label for="image" class="file-label">
                            <i class="fas fa-upload"></i> 选择图片
                        </label>
                        <div class="image-preview">
                            <c:choose>
                                <c:when test="${not empty tea.image}">
                                    <img src="images/${tea.image}" alt="当前茶叶图片" id="preview">
                                </c:when>
                                <c:otherwise>
                                    <span id="preview-text">暂无图片</span>
                                    <img src="" alt="" id="preview" style="display: none;">
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <input type="hidden" name="current_image" value="${tea.image}">
                    </div>

                    <div class="btn-group">
                        <button type="button" class="el-button" onclick="history.back()">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <button type="submit" class="el-button el-button--primary">
                            <i class="fas fa-save"></i> 保存修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 侧边栏收缩状态
    let isCollapsed = false;

    // 切换侧边栏状态
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        isCollapsed = !isCollapsed;

        if(isCollapsed) {
            sidebar.classList.add('collapsed');
            localStorage.setItem('sidebarCollapsed', 'true');
        } else {
            sidebar.classList.remove('collapsed');
            localStorage.setItem('sidebarCollapsed', 'false');
        }
    }

    // 图片预览功能
    function previewImage(input) {
        const preview = document.getElementById('preview');
        const previewText = document.getElementById('preview-text');
        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
            if(previewText) previewText.style.display = 'none';
        }

        if(file) {
            reader.readAsDataURL(file);
        }
    }

    // 页面加载时检查状态
    window.onload = function() {
        const savedState = localStorage.getItem('sidebarCollapsed');
        if(savedState === 'true') {
            document.getElementById('sidebar').classList.add('collapsed');
            isCollapsed = true;
        }

        // 表单提交验证
        document.querySelector('form').addEventListener('submit', function(e) {
            const price = document.getElementById('price').value;
            const unit = document.getElementById('unit').value;

            if(price <= 0) {
                alert('价格必须大于0');
                e.preventDefault();
                return;
            }

            if(unit <= 0) {
                alert('单位必须大于0');
                e.preventDefault();
            }
        });
    }
</script>
</body>
</html>